<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较大小的案例computed实现</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!--
       1.computed和watch如果都能完成某个功能,优先选择computed
       2.有一种情况,必须使用watch,computed无法完成
            如果在程序中采用了异步的方式,只能使用watch
       3.什么时候使用箭头函数?什么时候使用普通函数?
        看看这个函数是不是Vue进行管理的
        是Vue管理的函数:统一写成普通函数
        不是Vue管理的函数:统一写成箭头函数
    -->

    <div id="app">
        <h1>{{msg}}</h1>
        数值1:<input type="number" v-model="num1" /><br/>
        数值2:<input type="number" v-model="num2" /><br/>
        比较大小:{{compareResult}}
    </div>

    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '比较大小的案例',
                num1 : 0,
                num2 : 0
            },
            computed : {
                //计算属性的简写形式
                compareResult(){
                    //这里采用了异步方式，这里的箭头函数是javascript引擎去调用,所以最终return的时候
                    //将值返回给javascript引擎，而不是给了 Vue实例
                    setTimeout(() => {
                        if(result == 0){
                            return this.num1 + ' = ' + this.num2
                        }else if(result > 0){
                            return this.num1 + ' > ' + this.num2
                        }else{
                            return this.num1 + ' < ' + this.num2
                        }
                    } , 1000 * 3)

                }
            }
        })
    </script>


</body>
</html>